/**
 * Created by fangshufeng on 2018/4/24.
 */
import React, {Component} from 'react'
import jsonFormat from  'json-format';
import {Radio, Input,Tag}from 'antd';

import {connect} from 'react-redux'
import {TimeForRight} from '../other/timeFormat'

const {TextArea} = Input;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class RightView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentValue: 'url'
        }
    }

    jsonValue = () => {
        try {
            const value = this.state.currentValue === 'data'
                ? JSON.parse(this.props.current_select_data.config[this.state.currentValue])
                : this.props.current_select_data.config[this.state.currentValue];
            return jsonFormat(value, {
                type: 'space',
                size: 2
            });
        } catch (e) {
            try {
                return this.props.current_select_data.config[this.state.currentValue];
            } catch (e) {
                return '';
            }
        }

    };
    callback = v => {
        this.setState({currentValue: v});
    };

    render() {
        const {current_select_data}  = this.props;
        const config = current_select_data.config || '';
        const method = config.method || null;
        const timeValue = config.timestamp || null;

        return <div style={{...this.props.style, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
            <div style={{
                color: '#92cdec',
                textAlign: 'center',
            }}>请求方式:{method ? <Tag color="#f50">{method.toLocaleUpperCase()}</Tag> : null }
                &nbsp; 请求时间: {timeValue ? <Tag color="#f50">{TimeForRight(timeValue)} </Tag> : null}
            </div>

            <RadioGroup value={this.state.currentValue} size="small" style={{flex: 1,marginTop:10}}
                        onChange={(e) => this.callback(e.target.value)}>
                <RadioButton value="url">请求地址</RadioButton>
                <RadioButton value="data">请求参数</RadioButton>
                <RadioButton value="headers">请求头</RadioButton>
            </RadioGroup>

            <TextArea
                ref="result"
                type="text"
                value={this.jsonValue()}
                autosize={false}
                style={{
                    flex: 20
                }}
            />
        </div>
    }
}
export default connect(state => state.app)(RightView);